<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const images = ref([
    'https://img.zcool.cn/community/01f8aa5b976c0aa80121a0f77fc175.jpg@2o.jpg',
    'https://img2.baidu.com/it/u=511522363,1936887877&fm=253&fmt=auto&app=138&f=JPEG?w=1252&h=500',
    'https://img.book118.com/sr1/M00/17/2B/wKh2Al63b9mIL_zyAAE_igtuokwAAi6fAEu_4sAAT-i974.jpg',
]);
const router=useRouter()
const ToSearch=()=>{
    router.push("/search")
}
const Toshop=()=>{
    router.push("/shop")
}
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      finished.value = false;
      loading.value = true;
      onLoad();
    };
</script>
<template>
    <van-back-top class="custom" style="background-color: #4fc08d;bottom: 100px;"/>
    <HCnavbar title="首页" />
    <div style="width: 100%;height: 49px;"></div>
    <div style="width: 100%; height: 50px; background-color: #4fc08d; display: flex; justify-content: center; align-items: center;" @click="ToSearch">
        <div style="width: 92%; height: 73%; border-radius: 25px; background-color: #fff; color: rgb(77, 77, 73); display: flex; justify-content: flex-start; align-items: center;">
            <span style="display: inline-block; vertical-align: middle;margin-left:20px ;">请输入关键字</span>
        </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#07c160" lazy-render style="margin: 4px;margin-top: 0;">
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width: 100%;height: 204px;" />
        </van-swipe-item>
    </van-swipe>
    <div  style="display: flex;justify-content: space-between; align-items: center; margin-left: 20px;margin-right: 20px;margin-bottom: 10px;margin-top: 10px;">
        <svg t="1695037374414" style="width: 10%;,height: 50px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="960" ><path d="M710 1c31.48 0 57 25.52 57 57v55h123.158C934.806 113 971 149.194 971 193.842v748.316c0 44.648-36.194 80.842-80.842 80.842H133.842C89.194 1023 53 986.806 53 942.158V193.842C53 149.194 89.194 113 133.842 113H256V58c0-31.48 25.52-57 57-57h397z" fill="#19A15F" p-id="961"></path><path d="M351.978 851L868 1023l18.087 0.538c44.69 1.33 82.223-33.146 84.844-77.616l0.069-1.35-1.165-434.356-367.301-259.693-281.937 293.63 105.731 99.733L351.978 851z" fill="#10854D" opacity=".697" p-id="962"></path><path d="M602.534 250.523l-281.937 293.63 126.694 54.516-97.577 245.854L703.55 525.021l-147.014-46.044z" fill="#FFFFFF" p-id="963"></path></svg>
        <svg t="1695037397250" style="width: 10%;,height: 50px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1122" ><path d="M154.732 0v1024h-38.89C71.194 1024 35 987.806 35 943.158V80.842C35 36.194 71.194 0 115.842 0h38.89z m753.426 0C952.806 0 989 36.194 989 80.842v862.316c0 44.648-36.194 80.842-80.842 80.842H244.532V0h663.626z" fill="#19A05F" p-id="1123"></path><path d="M586 0l0.378 250.752 126.575-123.799L839.907 253V0zM413.471 507.66h429v57.963h-429V507.66z m0 115.925h429v57.962h-429v-57.962z" fill="#FFFFFF" p-id="1124"></path></svg>
        <svg t="1695037407439" style="width: 10%;,height: 50px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1283" ><path d="M50 50m65 0l794 0q65 0 65 65l0 794q0 65-65 65l-794 0q-65 0-65-65l0-794q0-65 65-65Z" fill="#F2F2F2" p-id="1284"></path><path d="M50 394h924v515c0 35.899-29.101 65-65 65H115c-35.899 0-65-29.101-65-65V394z" fill="#E2E2E2" p-id="1285"></path><path d="M50 638h924v271c0 35.899-29.101 65-65 65H115c-35.899 0-65-29.101-65-65V638z" fill="#C4C4C4" opacity=".598" p-id="1286"></path><path d="M801.125 285.82c-79.661-79.673-206.247-83.505-290.618-11.812-84.37-71.693-210.956-67.861-290.618 11.812-83.852 83.866-83.852 219.848 0 303.728l277.022 240.375c7.795 6.77 19.383 6.77 27.178 0l277.022-240.375c83.852-83.866 83.852-219.848 0-303.728h0.014z" fill="#19A15F" p-id="1287"></path><path d="M279.7 445c-13.9 0-25.33-11.253-25.672-25.413-2.04-86.38 107.581-129.135 112.247-130.914 13.286-5.062 28.083 1.75 33.078 15.216 4.98 13.452-1.712 28.436-14.97 33.513-1.055 0.42-80.153 32.37-79.012 80.94 0.343 14.378-10.888 26.31-25.058 26.658h-0.628 0.015z" fill="#FFFFFF" p-id="1288"></path></svg>
        <svg t="1695037418685" style="width: 10%;,height: 50px;" class="icon" viewBox="0 0 1041 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1447" ><path d="M504.542 857.545C258.902 853.758 61 663.253 61 428.8 61 191.981 262.92 0 512 0s451 191.98 451 428.801c0 39.049-5.49 76.879-15.776 112.83-48.213 191.836-190.76 348.37-427.89 478.437L512.12 1024 512 857.602l-7.458-0.057z" fill="#19A15F" p-id="1448"></path><path d="M281.958 499.945l188.589-175.926 387.91 412.387c-38.635 48.808-68.86 84.602-90.674 107.384-21.814 22.782-46.19 44.008-73.127 63.68L281.958 499.944z" fill="#128D51" opacity=".672" p-id="1449"></path><path d="M530.618 499.945l188.588-175.926 218.334 241.18c-16.742 52.398-31.889 91.417-45.441 117.06-13.553 25.641-37.25 60.118-71.093 103.43L530.618 499.946z" fill="#128D51" opacity=".672" p-id="1450"></path><path d="M470.557 326.705v190.171l-0.22 0.003c-3.039 50.366-37.226 91.901-82.669 103.826l0.002-103.829H280.405V326.705h190.152zM719.216 326.705v190.171l-0.22 0.003c-3.038 50.366-37.226 91.901-82.668 103.826l0.002-103.829H529.065V326.705h190.151z" fill="#FFFFFF" p-id="1451"></path></svg>
        <svg t="1695037432399" style="width: 10%;,height: 50px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1610" ><path d="M0 0h1024v1024H0z" fill="#202425" opacity=".01" p-id="1611"></path><path d="M33.764 550.451a34.13 34.13 0 0 1 10-24.136 34.143 34.143 0 0 1 24.14-9.997h887.638a34.143 34.143 0 0 1 24.14 9.997 34.13 34.13 0 0 1 10 24.136v371.334a34.13 34.13 0 0 1-10 24.135 34.143 34.143 0 0 1-24.14 9.998H67.904a34.143 34.143 0 0 1-24.14-9.998 34.13 34.13 0 0 1-10-24.135V550.45z" fill="#19A15F" p-id="1612"></path><path d="M102.4 102.23c0-18.86 15.282-34.148 34.133-34.148h750.934c18.851 0 34.133 15.289 34.133 34.148v512.213c0 18.859-15.282 34.147-34.133 34.147H750.933a34.126 34.126 0 0 0-24.136 10.002 34.155 34.155 0 0 0-9.997 24.146v17.073a34.155 34.155 0 0 1-9.997 24.146 34.126 34.126 0 0 1-24.136 10.002H341.333a34.126 34.126 0 0 1-24.136-10.002 34.155 34.155 0 0 1-9.997-24.146v-17.073a34.155 34.155 0 0 0-9.997-24.146 34.126 34.126 0 0 0-24.136-10.002H136.533c-18.851 0-34.133-15.288-34.133-34.147V102.23z" fill="#A1D06B" p-id="1613"></path><path d="M341 813h341v68H341zM341 230h341v68H341zM341 401h341v68H341z" fill="#FFFFFF" p-id="1614"></path></svg>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <div style="display: flex;justify-content: center; align-items: center;" v-for="item,index in list" :key="index">
        <HCcard @click="Toshop">
            <img style="width: 100%;height: 60%;" src="../../../assets/image/微信图片_20230201211200.jpg" alt="">
            <div style="width: 100%;">
            <p style="margin-top: -2px;font-weight: 600;">医用外科一次性防护口罩100只</p>
            <div style="margin-top:-5px ; display: flex; justify-content: space-between;">
                <span style="color: gray;text-decoration: line-through;">29.00</span>
                <span style="color: #4099e5;">加入购物车</span>
            </div>
            <div style="margin-top: 10px; display:flex ;justify-content: space-between;align-items: center;">
                <span><span style="font-size: 12px; color: #e23940;">￥</span><span style="font-size: 18px; color: #e23940;">16.00</span></span><div style="width: 82px; height: 30px; text-align: center; line-height: 32px; border-radius: 10px; background-color: #e23940; color: white; font-size: 14px;">直接购买</div>
            </div>
            </div>
        </HCcard>
        <HCcard @click="Toshop">
            <img style="width: 100%;height: 60%;" src="../../../assets/image/微信图片_20230201211200.jpg" alt="">
            <div style="width: 100%;">
            <p style="margin-top: -2px;font-weight: 600;">医用外科一次性防护口罩100只</p>
            <div style="margin-top:-5px ; display: flex; justify-content: space-between;">
                <span style="color: gray;text-decoration: line-through;">29.00</span>
                <span style="color: #4099e5;">加入购物车</span>
            </div>
            <div style="margin-top: 10px; display:flex ;justify-content: space-between;align-items: center;">
                <span><span style="font-size: 12px; color: #e23940;">￥</span><span style="font-size: 18px; color: #e23940;">16.00</span></span><div style="width: 82px; height: 30px; text-align: center; line-height: 32px; border-radius: 10px; background-color: #e23940; color: white; font-size: 14px;">直接购买</div>
            </div>
            </div>
        </HCcard>
         </div>
        </van-list>
    </van-pull-refresh>
</template>
<style scoped>
.box {
    padding-bottom: 52px;
}

.boxSon {
    width: 100%;
    text-align: center;
    line-height: 140px;
    margin-bottom: 10px;
}
</style>